<template>
  <div>
    <div class="container">
      <div class="row gutter-10 main-ad">
        <div class="col-2">
          <ul class="main-menu">
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>手机</a> /
              <a href>运营商</a> /
              <a href>数码</a>
            </li>
            <li>
              <a href>家用电器</a>
              <div class="panel">
                <div class="panel-top-btn">
                  <a href="">男装 ></a>
                  <a href="">男装 ></a>
                  <a href="">男装 ></a>
                  <a href="">男装 ></a>
                  <a href="">男装 ></a>
                  <a href="">男装</a>
                </div>
                <ul>
                  <li v-for="(item, index) in 10" :key="index">
                    <a class="panel-subcat" href="">女装女装 ></a>
                    <a href="" v-for="(item, index) in 20" :key="index">礼盒</a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
            <li>
              <a href>家用电器</a>
            </li>
          </ul>
        </div>
        <div class="col-6">
          <swiper />
        </div>
        <div class="col-2">
          <img
            style="width: 100%;margin-bottom: 10px;"
            src="https://img10.360buyimg.com/da/s380x300_jfs/t1/65144/30/14083/26762/5db6cc49E14a9e85f/d2f4397116d0d1e2.png.webp"
            alt
          />
          <img
            style="width: 100%;margin-bottom: 10px;"
            src="https://img20.360buyimg.com/babel/s380x300_jfs/t1/101601/1/13578/88749/5e5a67a4Ec16b92e0/54a5c96500874b19.jpg!q95.webp"
            alt
          />
          <img
            style="width: 100%;margin-bottom: 10px;"
            src="https://img13.360buyimg.com/da/s380x300_jfs/t1/48787/2/16027/79631/5dcef600E85d1bd56/39c88bbc058c9f53.png.webp"
            alt
          />
        </div>
        <div class="col-2">
          <div class="right">
            <div class="row">
              <div class="col-4">
                <img
                  class="avatar"
                  src=""
                  alt
                />
              </div>
              <div class="col-8">
                <div class="welcome">H1~欢迎光临！</div>
                <div class="login">
                  <a href>登录</a> |
                  <a href>注册</a>
                </div>
              </div>
            </div>
            <div class="two-btn">
              <button class="btn-new">新人福利</button>
              <button class="btn-plus">PLUS会员</button>
            </div>
            <div class="line"></div>
            <h3>商城快报</h3>
            <ul class="newlist">
              <li v-for="(item, index) in 4" :key="index">
                <span>热议</span>
                <a href>还在为买不到口罩</a>
              </li>
            </ul>
            <div class="line"></div>
            <div class="row grid">
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/30057/19/14881/720/5cbf064aE187b8361/eed6f6cbf1de3aaa.png"
                  alt
                />
                话费
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png"
                  alt
                />
                机票
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/31069/34/14642/979/5cbf0665Ec7dc8223/5fee386254dd2ebc.png"
                  alt
                />
                酒店
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/30057/19/14881/720/5cbf064aE187b8361/eed6f6cbf1de3aaa.png"
                  alt
                />
                话费
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png"
                  alt
                />
                机票
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/31069/34/14642/979/5cbf0665Ec7dc8223/5fee386254dd2ebc.png"
                  alt
                />
                酒店
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/30057/19/14881/720/5cbf064aE187b8361/eed6f6cbf1de3aaa.png"
                  alt
                />
                话费
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png"
                  alt
                />
                机票
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/31069/34/14642/979/5cbf0665Ec7dc8223/5fee386254dd2ebc.png"
                  alt
                />
                酒店
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/109398/22/7043/3066/5e55dd34E7ab9b078/274b5a5e95586510.png"
                  alt
                />
                话费
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png"
                  alt
                />
                机票
              </div>
              <div class="col-4">
                <img
                  src="https://m.360buyimg.com/babel/jfs/t1/31069/34/14642/979/5cbf0665Ec7dc8223/5fee386254dd2ebc.png"
                  alt
                />
                酒店
              </div>
            </div>
          </div>
        </div>
      </div>
      <h2 class="goods-head">为你推荐</h2>
      <div class="goods-type">
        <ul>
          <li>
            <div class="main">精选</div>
            <div class="sub">猜你喜欢</div>
          </li>
          <li class="line"></li>
          <li>
            <div class="main">智能先锋</div>
            <div class="sub">大电器城</div>
          </li>
          <li class="line"></li>
          <li class="active">
            <div class="main">智能先锋</div>
            <div class="sub">大电器城</div>
          </li>
          <li class="line"></li>
          <li>
            <div class="main">智能先锋</div>
            <div class="sub">大电器城</div>
          </li>
          <li class="line"></li>
          <li>
            <div class="main">智能先锋</div>
            <div class="sub">大电器城</div>
          </li>
          <li class="line"></li>
          <li>
            <div class="main">智能先锋</div>
            <div class="sub">大电器城</div>
          </li>
        </ul>
      </div>
      <div class="row gutter-10 goods-list">
        <a href="" v-for="(item, index) in 25" :key="index">
          <div class="col-b20">
            <div class="goods-item">
              <img src="https://img20.360buyimg.com/babel/s150x150_jfs/t1/92237/19/9222/62394/5e0d9782E8cbc9958/961b65e11b2d1a09.jpg.webp" alt="">
              <div class="title">
                【准新品】智声 智能家用食材清洗机 ZS-SCJ
              </div>
              <div class="price">
                <span>￥</span>1580.00
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="bline"></div>
    <div class="container">
      <div class="row bnewslist">
        <div class="col-2" v-for="(item, index) in 6" :key="index">
          <h4>购物指南</h4>
          <ul>
            <li><a href="">购物流程</a></li>
            <li><a href="">购物流程</a></li>
            <li><a href="">购物流程</a></li>
            <li><a href="">购物流程</a></li>
            <li><a href="">购物流程</a></li>
          </ul>
        </div>
      </div>
      <div class="bline"></div>
      <div class="footer">
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a> |
        <a href="">关于我们</a>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from '~/components/swiper'
export default {
  components: {
    swiper
  }
}
</script>

<style lang="scss">
.main-ad {
  margin-top: 10px;
  .main-menu {
    position: relative;
    padding: 13px 0;
    background-color: #fff;
    >li {
      font-size: 14px;
      padding: 4px 20px;
      &:hover {
        background-color: #ccc;
        .panel {
          display: block;
        }
      }
      .panel {
        z-index: 9999;
        display: none;
        position: absolute;
        top: 0;
        left: 192px;
        padding: 20px;
        width: 1006px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #ccc;
        min-height: 100%;
        .panel-top-btn {
          margin-bottom: 20px;
          a {
            padding: 5px;
            background-color: #000;
            color: #aaa;
          }
        }
        .panel-subcat {
          font-weight: bold;
        }
        li {
          margin-bottom: 5px;
          a {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .right {
    font-size: 13px;
    background: #fff;
    padding: 15px 15px 1px 15px;
    .avatar {
      width: 40px;
    }
    .welcome {
      color: #aaa;
      margin-bottom: 3px;
    }
    .line {
      background-color: #eee;
      height: 1px;
      width: 100%;
      margin: 10px 0;
    }
    .two-btn {
      padding-top: 10px;
      text-align: center;
      button {
        border: 0;
        border-radius: 20px;
        padding: 5px 10px;
      }
      .btn-new {
        background-color: red;
        color: #fff;
      }
      .btn-plus {
        background-color: #000;
        color: #ddc84f;
      }
    }
    .newlist {
      margin-top: 5px;
      li {
        font-size: 12px;
        padding-top: 5px;
        span {
          color: red;
          background-color: #ffeaea;
          padding: 1px 5px;
        }
      }
    }
    .grid {
      text-align: center;
      img {
        width: 70%;
      }
      [class^="col-"] {
        margin-bottom: 7px;
      }
    }
  }
}
.goods-head {
  text-align: center;
  padding: 10px 0 20px 0;
  font-size: 28px;
  font-weight: normal;
  color: #000;
}
.goods-type {
  padding: 10px 0;
  background-color: #fff;
  text-align: center;
  margin-bottom: 10px;
  .main {
    padding: 5px;
  }
  .active {
    color: red;
    .main {
      background-color: red;
      border-radius: 20px;
      color: #fff;
    }
    .sub {
      color: red;
    }
  }
  li {
    display: inline-block;
    padding: 0 50px;
    .sub {
      color: #ccc;
      font-size: 14px;
    }
  }
  .line {
    width: 1px;
    background-color: #eee;
    height: 2.5em;
    padding: 0;
  }
}
.goods-list {
  .col-b20 {
    text-align: center;
    margin-bottom: 10px;
  }
  .goods-item {
    background-color: #fff;
    padding: 20px;
    img {
      width: auto;
    }
    .title {
      color: #999;
      text-align: left;
      font-size: 13px;
      padding: 30px 0 10px 0;
      line-height: 1.5em;
    }
    .price {
      color: red;
      text-align: left;
      font-weight: bold;
      font-size: 20px;
      span {
        font-size: 13px;
      }
    }
    &:hover {
      img {
        opacity: .8;
      }
    }
  }
}
.bnewslist {
  a {
    font-size: 12px;
  }
}
.footer {
  text-align: center;
  font-size: 12px;
  padding-bottom: 50px;
}
</style>

